<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="form" :model="searchData" label-width="80px" size="mini">
        <el-row :gutter="10">
          <el-col :span="3.5">
            <el-form-item label="起始日期">
              <el-date-picker
                v-model="searchData.beginDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width:130px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="截止日期">
              <el-date-picker
                v-model="searchData.endDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width:130px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <el-button type="primary" size="mini" @click="search">查 询</el-button>
              <el-button size="mini" @click="reset">清 空</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        show-summary :summary-method="getSummaries"
      >
        <el-table-column
          type="index"
          width="50"
        />
        <el-table-column
          prop="alarm_area"
          label="作业区"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycle_alarm"
          label="周期预警井次"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="loadDiff_alarm"
          label="载荷差预警井次"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="quality_alarm"
          label="质量预警井次"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="summation"
          label="合计预警井次"
          header-align="center"
          align="center"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchData: {},
      tableData: [],
      page: 1,
      limit: 10,
      total: 0
    }
  },
  created() {
    this.getListPage(this.searchData)
  },
  methods: {
    getListPage(data) {
      this.$http.post('/TAlarmWell/countByTime', data).then(({ data: { data: res }}) => {
        this.tableData = res
      }).catch(err => {
        this.$message.error(err)
      })
    },
    search() {
      this.getListPage(this.searchData)
    },
    reset() {
      this.searchData = {}
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (index !== 1) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = '--'
        }
      })
      return sums
    }
  }
}
</script>

<style scoped>
</style>
